<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <form @submit.prevent="send">
            用户名：<input type="text" v-model.trim="user.name"><br><br>
            密码： <input type="password" v-model="user.psw"><br><br>
            年龄：<input type="number" v-model.number="user.age"><br><br>
            性别：
            男：<input type="radio" name="gender" value="1" v-model="user.gender">
            女：<input type="radio" name="gender" value="0" v-model="user.gender">
            <br><br>
            爱好：
            旅游：<input type="checkbox" v-model="user.interest" value="travel">
            运动：<input type="checkbox" v-model="user.interest" value="sport">
            唱歌：<input type="checkbox" v-model="user.interest" value="sing"><br><br>
            学历：<select v-model="user.grade">
                <option value="">请选择学历</option>
                <option value="zk">本科</option>
                <option value="bk">专科</option>
                <option value="ss">硕士</option>
            </select><br><br>
            简历：<textarea cols="50" rows="10" v-model.lazy="user.introduce"></textarea><br><br>
            <input type="checkbox" v-model="user.accept">阅读并接受协议<br><br>
            <button>注册</button>
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '表单数据收集',
                user: {
                    name: '',
                    psw: '',
                    age: '',
                    gender: '1',
                    interest: ['sing'],
                    grade: 'zk',
                    introduce: '',
                    accept: ''
                }
            },
            methods: {
                send() {
                    alert('条状')
                    console.log(JSON.stringify(this.user));
                }
            }
        })
    </script>
</body>

</html>